﻿<div class="layui-card" id="lg-FormBase" style="height:100%">
    <div class="lg-diy-wrap">
        <div class="lg-diy-head layui-card-header">
            <div><i class="fa fa-home fa-fw"></i>表单设计</div>
            <div class="lg-diy-tools"><span class="lg-btn lg-btn-warm" v-on:click="Back()">返回</span><span class="lg-btn lg-btn-normal" v-on:click="Save()">保存</span></div>
        </div>
        <div class="lg-diy-body">
            <div class="lg-diy-left">
                <lg-form-base-items v-on:selected="onItemSelected"></lg-form-base-items>
            </div>
            <div class="lg-diy-center lg-form">
                <div class="lg-form-background">
                    <div class="lg-form-content">
                        <div class="lg-form-head">
                            <div class="lg-form-head-title">
                                <input class="lg-input" placeholder="表单标题">
                            </div>
                            <div class="lg-form-head-intro">
                                <textarea class="lg-textarea" placeholder="添加描述"></textarea>
                            </div>
                        </div>
                        <div class="lg-form-body">
                            <draggable :list="baseForm.Items" handle=".lg-form-drag" ghost-class="ghost" :force-fallback="true" chosen-class="choseClass" animation="300" delay="2" item-key="1">
                                <template #item="{ element }">
                                    <div :class="['lg-form-box',{'act':curr&&element.Data.Name==curr.Data.Name},{'lg-form-box-no-render':!element.Data.IsRender}]" v-on:click="curr=element" accesskey="element.Data.Name" :style="{'width':element.Data.Width}">
                                        <div class="lg-form-panel"><i class="fa fa-trash-o fa-fw" v-on:click="unSelect(element)"></i></div>
                                        <div class="lg-form-drag"></div>
                                        <div class="lg-no-render" v-if="!element.Data.IsRender"><i class="fa fa-eye-slash fa-fw"></i></div>
                                        <component :is="GetComponent(element.TypeName)"
                                                   :data="element.Data"
                                                   :items="baseForm.Items"
                                                   v-model:value="element.Data.Value">
                                        </component>
                                    </div>
                                </template>
                            </draggable>
                        </div>
                    </div>
                </div>
            </div>
            <div class="lg-diy-right">
                <lg-form-setting :data="curr.Data" :type-name="curr.TypeName" :items="baseForm.Items" base="true" v-if="curr"></lg-form-setting>
            </div>
        </div>
    </div>
</div>
<script type="module">
    import { freeForm } from '/plugins/lgform/lg.form.2.1.js';
    import { freeFormBase } from '/plugins/lgform/lg.form.base.js';
    freeForm.addEventListener();
    frame.createPage({
        mounted: function() {
            var page = this;
            var app = Vue.createApp({
                data() {
                    return {
                        FormItems: [],
                        curr: null,
                        baseForm: {
                            Title: "",
                            Intro: "",
                            Items: []
                        }
                    }
                },
                mounted: function() {
                    this.GetBaseForm()
                },
                computed: {
                    CurrItem: function() {
                        var arr = this.baseForm.Items.filter(p => p.Data.Name == this.curr)
                        if (arr.length > 0) {
                            return arr[0].Data
                        } else {
                            return null;
                        }
                    }
                },
                methods: {
                    GetBaseForm: function() {
                        lg.request({
                            url: "/api/sys/apply/GetBaseForm",
                            success: res => {
                                if (res.code == 0 && res.data != null) {
                                    this.baseForm = res.data;
                                    this.baseForm.Items = freeForm.toJson(res.data.Items)
                                }
                            }
                        })
                    },
                    GetComponent: function(key) {
                        return freeForm.types[key].component.name;
                    },
                    GetBaseItemByName: function (name) {
                        for (let i in this.baseForm.Items) {
                            if (this.baseForm.Items[i].Data.Name == name) {
                                return { index: i, item: this.baseForm.Items[i] }
                            }
                        }
                        return null;
                    },
                    AddItem: function(typeName) {
                        var type = freeForm.newType(typeName);
                        if (type) {
                            this.baseForm.Items.push(type);
                            this.curr = type
                        }
                    },
                    Save: function() {
                        var data = lg.obj.copy(this.baseForm);
                        data.Items = freeForm.toString(data.Items);
                        lg.request({
                            url: "/api/sys/apply/EditBaseForm",
                            method: "post",
                            data: data,
                            success: res => {
                                if (res.code == 0) {
                                    layer.msg("提交成功！", { icon: 1 });
                                } else {
                                    layer.msg(res.msg, { icon: 2 })
                                }
                            }
                        })
                        return false;
                    },
                    Back: function() {
                        frame.Back(page.url)
                    },
                    unSelect: function(item) {
                        var that = this;
                        layer.confirm("是否确认移除项[" + item.Data.Title + "]?", function(box) {
                            layer.close(box);
                            that.baseForm.Items = that.baseForm.Items.filter(p => p.Data.Name != item.Data.Name);
                            that.curr = that.baseForm.Items[that.baseForm.Items.length - 1];
                        })
                    },
                    onItemSelected: function (typeName) {
                        var type = freeForm.newType(typeName);
                        if (type) {
                            if (this.curr) {
                                var obj = this.GetBaseItemByName(this.curr.Data.Name);
                                this.baseForm.Items.splice(obj.index, 0, type)
                            }
                            else {
                                this.baseForm.Items.push(type);
                            }
                        }
                    }
                }
            })
            freeForm.regComponent(app);
            freeFormBase.regComponent(app);
            app.component('draggable', window.vuedraggable)
            app.mount('#lg-FormBase')
        }
    }).mount();
</script>